<template>
      <view>
        <div class="default-main ba-table-box">
            <div class="ba-operate-form" style="background-color: #fff;min-height: 85vh;">

                <el-form :model="form" label-width="150px" style="width: 800px">
                        <el-form-item label="订单类型">
                            <el-checkbox-group v-model="form.order_type">
                                <el-checkbox label="普通订单" value="Value A" />
                                <el-checkbox label="秒杀订单" value="Value B" />
                                <el-checkbox label="拼团订单" value="Value C" />
                                <el-checkbox label="砍价订单" value="Value C" />
                                <el-checkbox label="限时折扣订单" value="Value C" />
                                <el-checkbox label="积分兑换" value="Value C" />
                            </el-checkbox-group>
                        </el-form-item>
                </el-form>
                <el-form :model="form" label-width="150px" style="width: 800px">
                        <el-form-item label="订单状态">
                            <el-checkbox-group v-model="form.order_type">
                                <el-checkbox label="未付款" value="weifu" />
                                <el-checkbox label="待发货" value="daifa" />
                                <el-checkbox label="待收货" value="daishou" />
                                <el-checkbox label="申请退款" value="tui" />
                                <el-checkbox label="已退款" value="yitui" />
                                <el-checkbox label="交易完成" value="compolete" />
                            </el-checkbox-group>

                        </el-form-item>
                </el-form>
                <el-form :model="form" label-width="150px" style="width: 800px">
                        <el-form-item label="付款时间">
                        <el-input v-model="form.name" />
                        </el-form-item>
                </el-form>
                <el-form :model="form" label-width="150px" style="width: 800px">
                        <el-form-item label="用户ID">
                            <el-input v-model="form.uid" />
                        </el-form-item>
                </el-form>
                <el-form :model="form" label-width="150px" style="width: 800px">
                        <el-form-item label="会员分组">
                            <el-select
                                v-model="form.group"
                                placeholder="全部"
                                style="width: 240px"
                                >
                                <el-option
                                    v-for="item in user_group"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                                </el-select>
                        </el-form-item>
                </el-form>
                <el-form :model="form" label-width="150px" style="width: 800px">
                    <el-button type="primary" style="margin-left: 150px;">立即导出</el-button> 
                </el-form>
                

            </div>
        </div>
      </view>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()
const form = ref([{
    name:'',
    order_type:'',
    order_status:'',
    group:''
}])
const user_group = ref([])
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    ordernum: [buildValidatorData({ name: 'number', title: t('order.order.ordernum') })],
    create_time: [buildValidatorData({ name: 'date', title: t('order.order.create_time') })],
    is_pay: [buildValidatorData({ name: 'number', title: t('order.order.is_pay') })],
    order_status: [buildValidatorData({ name: 'number', title: t('order.order.order_status') })],
    tel: [buildValidatorData({ name: 'number', title: t('order.order.tel') })],
    tradernum: [buildValidatorData({ name: 'number', title: t('order.order.tradernum') })],
    deliver_time: [buildValidatorData({ name: 'date', title: t('order.order.deliver_time') })],
    receive_time: [buildValidatorData({ name: 'date', title: t('order.order.receive_time') })],
    complete_time: [buildValidatorData({ name: 'date', title: t('order.order.complete_time') })],
    money: [buildValidatorData({ name: 'number', title: t('order.order.money') })],
})
</script>

<style scoped lang="scss"></style>
